<script setup lang='ts' name="rights-management">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { delPrivileges, getPrivileges } from '@fl/api/iam-api'
import ButtonItem from '@fl/components/button-item.vue'
import { cloneDeep } from 'lodash-es'

import type { IRowV0 } from './types'

import addItem from './component/add/index.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { btns, gridOptions } = useTable()
const { form, schema } = useForm()

const addDialog = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const xGrid = ref<VxeGridInstance<IRowV0>>()

const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()

async function getData() {
    gridOptions.loading = true
    getPrivileges({
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        page_size: gridOptions.pagerConfig.pageSize,
    }).then((res: any) => {
        gridOptions.pagerConfig.total = res.total ?? 0
        gridOptions.data = res?.items ?? []
        gridOptions.loading = false
    })
}

function reset() {
    form.value = {
        group_name: '',
        keyword: '',
        module_name: '',
    }
    getData()
}

function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            detail.value = cloneDeep(row)
            addDialog.value = true
            addItemRef.value.init(false)
            break
        case 'delete':
            delPrivileges(row.id)
            getData()
            break
        default:
            break
    }
}

function doAdd() {
    addDialog.value = true
    addItemRef.value.init()
}
</script>

<template>
    <el-card class="mb-20">
        <PlusForm v-model="form"
                  :row-props="{ gutter: 20 }"
                  :columns="schema"
        >
            <template #footer>
                <div class="ml-auto">
                    <el-button type="primary"
                               @click="getData"
                    >
                        查询
                    </el-button>

                    <el-button @click="reset">
                        重置
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>

    <el-card>
        <div class="mb-20">
            <el-button type="primary"
                       @click="doAdd"
            >
                新增
            </el-button>
        </div>
        <!-- 列表 -->
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </vxe-grid>
    </el-card>

    <addItem ref="addItemRef"
             v-model="addDialog"
             :data="detail"
             @confirm="getData"
    />
</template>
